@use 'variables' as *;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: $text-color;
  background-color: $background-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100%;
  height: 100%;
}

// 禁止长按选择
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

// 禁止滚动
.no-scroll {
  overflow: hidden;
}

// 文本溢出省略号
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 多行文本溢出省略号
.multi-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

// 弹性布局
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

// 间距类
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 16px; }
.m-4 { margin: 24px; }
.m-5 { margin: 32px; }

.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 16px; }
.p-4 { padding: 24px; }
.p-5 { padding: 32px; }

// 文本对齐
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

// 字体粗细
.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }

// 显示/隐藏
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

// 定位
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

// 清除浮动
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

// 1px边框（移动端）
.hairline {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #eee;
    transform: scaleY(0.5);
  }
}

// 文本颜色
.text-primary { color: $primary-color; }
.text-success { color: $success-color; }
.text-warning { color: $warning-color; }
.text-danger { color: $danger-color; }
.text-muted { color: $text-color-light; }

// 背景颜色
.bg-white { background-color: #fff; }
.bg-transparent { background-color: transparent; } 